<template>
  <component :is="LayoutComponents[layout]" />
  <ThemeDrawer />
</template>

<script setup lang="ts" name="layout">
import { computed, onMounted, type Component } from "vue";
import { LayoutType } from "@/stores/interface";
import { useGlobalStore } from "@/stores/modules/global";
import { useMenuStore } from "@/stores/modules/menu";
import { useAuthStore } from "@/stores/modules/auth";
import ThemeDrawer from "./components/ThemeDrawer/index.vue";
import LayoutVertical from "./LayoutVertical/index.vue";
import LayoutClassic from "./LayoutClassic/index.vue";
import LayoutTransverse from "./LayoutTransverse/index.vue";
import LayoutColumns from "./LayoutColumns/index.vue";
import MRA_FILES from "@/biz/configs/mra.json";

import { MRAItem, MenuOptions } from "@/biz/interface/menu";
import { getMenusFromMRA, handleRouter } from "@/utils";

const LayoutComponents: Record<LayoutType, Component> = {
  vertical: LayoutVertical,
  classic: LayoutClassic,
  transverse: LayoutTransverse,
  columns: LayoutColumns
};

const authStore = useAuthStore();
const menuStore = useMenuStore();
const globalStore = useGlobalStore();
const layout = computed(() => globalStore.layout);

const menuFilter = (data: MenuOptions[]) => {
  let _meun = [] as MenuOptions[];
  let authCodes = authStore.getAuthRouterCodes;
  data.forEach(m => {
    if (Object.values(authCodes).indexOf(m.code!) >= 0) {
      let _m = { ...m };
      delete _m["children"];
      if (m.children && m.children.length) {
        _m.children = menuFilter(m.children);
      }
      _meun.push({ ..._m });
    }
  });
  return _meun;
};

// 获取菜单列表中
const getMenuList = async () => {
  const data = getMenusFromMRA(MRA_FILES as Array<MRAItem>);
  data && authStore.setAuthRouter(handleRouter(data));
  // 从菜单中过滤有权限的菜单
  let _menu = menuFilter(data);
  data && menuStore.setMenuList(_menu);
};

onMounted(() => {
  console.log("layout页面, 开始加载菜单");
  getMenuList();
});
</script>

<style scoped lang="scss">
.layout {
  min-width: 600px;
}
</style>
